<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>父级边框塌陷</title>
</head>
<style>
    /*清除浮动，防止父级边框塌陷的四种方法*/
    /*浮动元素后面加空div*/
    /*简单，空div会造成HTML代码冗余*/
    /*设置父元素的高度*/
    /*简单，元素固定高会降低扩展性*/
    /*父级添加overflow属性*/
    /*简单，下拉列表框的场景不能用*/
    /*父级添加伪类after*/
    /*写法比上面稍微复杂一点，但是没有副作用，推荐使用*/
    #divall{
        border: 1px solid red;
        /*height: 400px;第二种 设父边框高度*/
        /*overflow: hidden;第三种 在父级里面加overflow属性*/
    }
    /*第四种：父级添加伪类*/
    /*#divall:after{*/
    /*    content: '';          !*在clear类后面添加内容为空*!*/
    /*    display: block;      !*把添加的内容转化为块元素*!*/
    /*    clear: both;         !*清除这个元素两边的浮动*!*/
    /*}*/
    #div1{
width: 200px;
        height: 200px;
        background: green;
        float: left;
    }
    #div2{
        width: 200px;
        height: 200px;
        background: blue;
        float: left;
    }
    /*.clear{  clear: both;  margin: 0; padding: 0;}第一种 加一个空的div*/
</style>
<body>
<div id="divall">
  <div id="div1"></div>
  <div id="div2"></div>
<!--    <div class="clear"></div>第一种-->
</div>
</body>
</html>